<template>
	<view>
		<view class="main">		
			<view class="top">
				<view class="cu-avatar round lg margin-right"  :style="{backgroundImage: 'url('+ $wanlshop.oss(user.avatar, 42, 42, 2, 'avatar') +')'}"></view> 
				<view class="user" v-if="user.isvip">{{user.nickname}} | VIP至{{$wanlshop.timeFormat(user.vipend)}}</view>	
				<view class="user" v-else>{{user.nickname}} | 非会员</view>		
			</view>
			<image class="image" :src="$wanlshop.oss('https://ddguan.oss-cn-beijing.aliyuncs.com/uploads/20240710/e6cf3fdea443eaf7d2ec4b6d051e735d.png')"></image>
			<view class="title" >会员权益</view>
			<view class="list">
				<view class="item" @tap="onDetails(2, '新人专享')">
					<view class="t">
						<image class="image" src="/static/images/vip/icon-1.png"></image>
					</view>			
					<view class="b">超低价格<br/>一人一次</view>
				</view>
				<view class="item" @tap="onDetails(1, '新人专享')">
					<view class="t">
						<image class="image" src="/static/images/vip/icon-2.png"></image>
					 </view>
					<view class="b">二重福利<br/>分享返佣</view>
				</view>
				<view class="item" @tap="onDetails(17, '复购奖励')">
					<view class="t" >
						<image class="image" src="/static/images/vip/icon-3.png"></image>
					</view>	
					<view class="b">三重福利<br/>复购奖励</view>
				</view>
				<view class="item"  @tap="onDetails(18, '持续奖励')">
					<view class="t">
						<image class="image" src="/static/images/vip/icon-4.png"></image>
					</view>	
					<view class="b">持续分享<br/>持续奖励</view>
				</view>
			</view>
			<view style="clear: both;"></view>
	    </view>
		<view class="task">
			<view class="fg">任务中心</view>
			<view class="list">
				<view class="item" >购买会员套餐 <text class="bt" v-if="user.isvip" style="color: gray;">已完成</text><text v-else class="bt" @tap="onGoods(2)">去完成</text></view>
				<view class="item" @tap="$wanlshop.to('/pages/user2/offlines/offlines')">分享获现金:（{{offines}}/3）<text class="bt" v-if="offines>=4" style="color: gray;">已完成</text><text v-else class="bt" @tap="$wanlshop.to('/pages/user2/qrcode/qrcode')">去完成</text></view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				offines:0
			}
		},
		computed: {
			...mapState(['user'])		
		},
		onLoad() {
			this.getOfflinesNumber();
		},
		methods: {
			getOfflinesNumber(){
				uni.request({
				url: '/wanlshop/user/getOfflinesNumber',			       
				success: res => {
					this.offines = res.data.number;					
				}
			}) 
			}
			
		}
	}
</script>

<style>
	.main{
		font-family: OPPOSans Medium;
		background-color: #F14948;
		padding: 40rpx 30rpx;
		position: relative;
		padding-bottom: 40px;
	}
	.main .top{
		position: absolute;
		left: 16rpx;
		top: 26rpx;
	}
	.top .cu-avatar,.top .user{
		float: left;
	} 
	.top .cu-avatar{
		width: 64rpx;
		height: 64rpx;
		margin: 8rpx;
	}
	.top .user{
		margin-top: 18rpx;
		color: white;
	}
	.main .image{
		width: 100%;
		height: 407rpx;
	}
	.main .title{
		margin: 30rpx 0;
		color:#D2A98C;
		font-size: 37rpx;
	}
	.main .list .item{
		width: 24%;
		float: left;
		margin-right: 1%;
		text-align: center;
		background-color: #F6D1B6;
		border-radius: 0 0 20px 20px;
	}
	.main .list .t{
		text-align: center;
		padding: 20px 0 10px 0;	
	}
    .main .list .item .t .image{		
		width:80rpx;
		height: 80rpx
	}
	.main .list .b{
		background-image: url('/static/images/vip/bg.png');
		background-repeat: no-repeat;
		height: 135rpx;
		padding: 15px 0 10px 0;
		font-size: 36rpx;
		background-size: 100%;		
	}
	.task{
		position: relative;
	}
	.task .fg{
		position: absolute;
		left: 0;
		top: -22rpx;
		background-color: white;
		border-radius: 15px 15px 0 0 ;
		background-image: url('/static/images/vip/tbg.png');
		background-repeat: no-repeat;
        text-align: center;
		height: 100rpx;
		line-height: 70rpx;
		font-size: 39rpx;
		background-size: 50%;
		background-position: center;
		padding-top: 20rpx;
		width: 100%;
		color: #2B2221;		
	}
	.task .list{
		min-height: 500rpx;
		background-color: white;
		padding: 30rpx;
		padding-top: 90rpx;
	}
	.task .list .item{
		margin-bottom: 30rpx;
		background-color: #E74242;
		color: #F4B59F;
		padding: 50rpx 30rpx;
		font-size: 32rpx;
		font-family: 微软雅黑;
		border-radius: 20px;
		position: relative;
	}
	.task .list .item .bt{
		position: absolute;
		top: 40rpx;
		right: 30rpx;
		background-color: #F7D1B6;
		border-radius: 30px;
		padding: 10rpx 20rpx;
		float: right;
		color: #E84C4A;
		font-size: 34rpx;
	}
</style>
